::v-deep .el-dialog {
    border-radius: 16px;
    padding: 32px 48px;
    margin-top: 1%;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 26px;
}

.payment {
    font-size: 28px;
    font-family: Manrope, Manrope-700;
    font-weight: 700;
    text-align: LEFT;
    color: #02102e;
    margin-bottom: 32px;
}

.sceInp {
    margin-bottom: 48px;

    .lefBox {
        .rigBtn {
            font-size: 18px;
            font-family: Manrope, Manrope-700;
            font-weight: 700;
            text-align: LEFT;
            color: #8590A1;
            background: #f7f7f9;
            border-radius: 8px;
            padding: 10px 20px;
            margin-right: 20px;
        }
    }

    .rigInp {
        width: 319px;
        height: 48px;
        border: 1px solid #dddee1;
        border-radius: 8px;

        .inp {
            height: 90%;
            width: 70%;
            border: none;
            padding-left: 20px;
        }

        img {
            width: 16px;
            height: 16px;
            margin-right: 15px;
        }

        .inp:focus-visible {
            border: none;
            outline: none;
        }
    }
}

.tabTop {
    margin-bottom: 80px;

    .tabsHand {
        justify-content: space-around;
        background-color: #fafafa;
        height: 60px;

        .tabItem {
            width: 140px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .tabItemFu {
        justify-content: space-around;
        height: 120px;
        border-bottom: 1px solid #dddee1;

        .tabItem {
            width: 140px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            word-break: break-all; //英文
            white-space: pre-wrap; //中文
        }

        .outlin {
            font-size: 16px;
            font-family: Manrope, Manrope-400;
            font-weight: 400;
            text-decoration: underline;
            text-align: LEFT;
            color: #02102e;
        }
    }
}

.addPlay {
    margin-bottom: 80px;

    .addPlayBox {
        .itemBox {
            width: 405px;
            height: 114px;
            border: 1px solid #dddee1;
            border-radius: 16px;
            padding: 24px 32px;
            margin-right: 32px;
            justify-content: space-between;

            &:nth-child(3n) {
                margin-right: 0;
            }

            .topTom {
                font-size: 16px;
                font-family: Manrope, Manrope-700;
                font-weight: 700;
                text-align: LEFT;
                color: #000000;
            }

            .num {
                font-size: 20px;
                font-family: Manrope, Manrope-700;
                font-weight: 700;
                text-align: LEFT;
                color: #000000;
            }

            .edit {
                font-size: 16px;
                font-family: Manrope, Manrope-400;
                font-weight: 400;
                text-align: LEFT;
                color: #8590a1;
            }

            .jiaAdd {
                font-size: 20px;
                font-family: Manrope, Manrope-700;
                font-weight: 700;
                text-align: LEFT;
                color: #02102e;
            }
        }
    }
}

.diatitle {
    font-size: 20px;
    font-family: Manrope, Manrope-700;
    font-weight: 700;
    text-align: LEFT;
    color: #000000;
}

.diaxain {
    width: 100%;
    height: 1px;
    background: #dddee1;
    margin: 32px 0;
}

.diaform {
    .formLef {
        width: 50%;
        border-right: 1px solid #dddee1;

        .tit {
            font-size: 18px;
            font-family: Manrope, Manrope-700;
            font-weight: 700;
            text-align: LEFT;
            color: #02102e;
            margin-bottom: 22px;
        }
    }

    .card {
        font-size: 16px;
        font-family: Manrope, Manrope-500;
        font-weight: 500;
        text-align: LEFT;
        color: #02102e;
        margin-bottom: 12px;

        span {
            font-size: 16px;
            font-family: Manrope, Manrope-500;
            font-weight: 500;
            text-align: LEFT;
            color: #db0000;
        }
    }

    .expDate {
        margin-bottom: 12px;
        width: 90%;
    }

    .diainp {
        width: 90%;
        height: 44px;
        border: 1px solid #dddee1;
        border-radius: 4px;
        padding-left: 20px;
        margin-bottom: 24px;
    }

    .diainps {
        width: 100%;
        height: 44px;
        border: 1px solid #dddee1;
        border-radius: 4px;
        padding-left: 20px;
        margin-bottom: 12px;
    }

    .diainp:focus-visible,
    .diainps:focus-visible {
        border: 1px solid #dddee1;
        outline: none;
    }
}

.formRig {
    width: 50%;

    .tit {
        font-size: 18px;
        font-family: Manrope, Manrope-700;
        font-weight: 700;
        text-align: LEFT;
        color: #02102e;
        margin-bottom: 22px;
    }
}

.btnDet {
    margin-top: 32px;

    .lefBtnSave {
        width: 102px;
        height: 48px;
        line-height: 48px;
        background: #02102e;
        border-radius: 8px;
        font-size: 16px;
        font-family: Manrope, Manrope-700;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
    }

    .lefBtnDet {
        width: 116px;
        height: 48px;
        line-height: 48px;
        background: #f7f7f9;
        border-radius: 8px;
        font-size: 16px;
        font-family: Manrope, Manrope-700;
        font-weight: 700;
        text-align: center;
        color: #02102e;
    }
}

.act {
    background-color: #02102e !important;
    color: #fff !important;
}